<template>
    <div class="body_box">
        <!-- app-container -->
        <div class="head">
            <el-form :model="queryParams" ref="queryParams" :inline="true">
                <el-form-item label="" prop="dateType" style="width: 190px;">
                    <div class="dateClass">
                        <div class="dateClassItem" :class="dateIndex === index ? 'dateOn' : ''"
                            v-for="(item, index) in dateWordList" :key="index" @click="changeDate(item, index)">{{item.name}}
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="创建时间：" prop="date">
                    <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" @change="handleTime" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="商户查询：" prop="">
                    <el-select v-model="merchantIdList" filterable multiple collapse-tags placeholder="可输入查询多选商户" clearable style="width: 220px" @change="merchantChange">
                        <el-option v-for="dict in merchantList" :key="dict.id" :label="dict.merchantName" :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="邀请人：" prop="referrer">
                    <el-select v-model="queryParams.referrer" filterable placeholder="请选择" clearable
                        style="width: 190px">
                        <el-option v-for="dict in inviterList" :key="dict.referrer" :label="dict.name" :value="dict.referrer" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="listBox">
            <div class="listBox_head">
                <div class="list_title">交易数据</div>
                <!-- <div class="listBox_head_r">
                    <el-checkbox v-model="checked">创建新分享任务</el-checkbox>
                    <el-tooltip style="margin-left: 10px;cursor: pointer;" effect="dark" content="选择时间段内操作退款的数据" placement="top">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </div> -->
            </div>
            <div class="list_head">
                <div class="list_head_itme" :class="itemIndex == index ? 'lhOn' : ''" v-for="(item, index) in listHeadList"
                    :key="index" @click="clickItem(item, index)">
                    <div class="lh_tip">
                        <span>{{item.name}}</span>
                        <el-tooltip class="item" effect="dark" :content="item.tip" placement="top">
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                    </div>
                    <div class="lh_num">{{item.num}}</div>
                </div>
            </div>
            <div class="list_body" v-loading="loadingLineEcharts">
                <LineData style="width: 100%;height: 300px;" ref="lineData"> </LineData>
            </div>
        </div>
        <div class="orderSource">
            <div class="orderSource_item">
                <div class="os_title">
                    <div class="os_title_l">订单来源</div>
                    <div class="os_title_r">
                        <el-select v-model="orderSource" placeholder="请选择" style="width: 190px" @change="selectOrderSource">
                            <el-option v-for="dict in orderSourceList" :key="dict.id" :label="dict.name" :value="dict.id" />
                        </el-select>
                    </div>
               </div>
               <div class="os_body" v-loading="loadingPicEcharts">
                  <PieData style="width: 100%;height: 100%;" ref="pieData"> </PieData>
               </div>
           </div>
           <div class="orderSource_item">
                <div class="os_title">
                    <div class="os_title_l">退款分析</div>
                    <div class="os_title_r"></div>
               </div>
               <div class="os_body">
                    <el-table ref="table" v-loading="loading" :data="refundAnalysisList" stripe border>
                        <el-table-column label="订单来源" align="center" prop="name" :show-overflow-tooltip="true"  />
                        <el-table-column label="退款数量" align="center" prop="refundCount" :show-overflow-tooltip="true" />
                        <el-table-column label="退款金额" align="center" prop="refundsAmount" :show-overflow-tooltip="true" />
                        <el-table-column label="退款人数" align="center" prop="refundsPersonCount" :show-overflow-tooltip="true" />
                        <el-table-column label="退款金额占比" align="center" prop="refundsAmountRadio" :show-overflow-tooltip="true" >
                            <template slot-scope="scope">
                                <span>{{scope.row.refundsAmountRadio + '%'}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
               </div>
           </div>
        </div>
        <div class="listBox">
            <TableData  ref="refTableData" > </TableData>
        </div>
    </div>
</template>
<script>
import {
    salesInviterList,
    salesTransactionData,
    salesOrderSourceData,
    salesRefundAnalysisData,
    salesShopList
} from "@/api/merchants/salesAnalysis";
import PieData from './components/pieData.vue'
import LineData from './components/lineData.vue'
import TableData from './components/tableData.vue'
export default {
    name: "salesAmountStatistics",
    components: {
        PieData,
        LineData,
        TableData
    },
    data() {
        return {
            loading: false,
            loadingLineEcharts:false,
            loadingPicEcharts:false,
            total: 0,//状态字典数组
            inviterList: [],//邀请人列表
            merchantList: [],//交易类型列表
            setAccountStatusList: [],//结算账户状态
            dateIndex: 0,//时间下标
            dateWordList: [
                { id: 1, name: '昨日', value: 1 },
                { id: 2, name: '本周', value: 2 },
                { id: 3, name: '本月', value: 3 },
            ],
            itemIndex: 0,
            listHeadList: [
                { id: 0, name: '销售订单数', tip: '筛选条件下完成订单支付的数', num: 0 ,value:1},
                { id: 1, name: '实付金额（元）', tip: '筛选条件下用户实际支付订单总额', num: 0  ,value:2},
                { id: 2, name: '支付人数', tip: '筛选条件下总支付成功人数（人数单日内去重）', num: 0 ,value:3 },
                { id: 3, name: '退款笔数', tip: '筛选条件下退款成功的笔数', num: 0 ,value:4 },
                { id: 4, name: '退款金额（元）', tip: '筛选条件下退款成功的总金额', num: 0,value:5 },
                { id: 5, name: '退款人数', tip: '退款成功的总人数（单日内去重）', num: 0 ,value:6 },
            ],
            orderSource:1,//订单来源
            // 订单来源列表
            orderSourceList:[
                {id:1,name:'销售订单数'},
                {id:2,name:'实付金额'},
                {id:3,name:'支付人数'},
            ],
            //表格数据
            tabList: [],
            refundAnalysisList:[], //退款分析
            transactionData:[],//交易数据
            orderSourceData:{},//订单来源
            date: [], //所选时间
            merchantIdList:[], //商户查询id列表
            queryParams: {
                referrer: '', //邀请人
                merchantIds: '', //商户查询
                dateType:1,//日期类别 1昨日 2本周 3本月
                beginDate: '', //开始时间
                endDate: '', //结束时间
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 1 * 24 * 3600 * 1000; 
                }
             }
        }
    },
    created() {
        // this.getSalesTransactionData()
        // this.getSalesRefundAnalysisData()
        // this.getSalesOrderSourceData()
        this.getSalesInviterList()
        this.getSalesShopList()
        this.getRequestData()
    },
    methods: {
        // 初始化数据
        getRequestData(){
            this.getSalesRefundAnalysisData() //获取用户退款分析列表
            this.getSalesOrderSourceData() // 订单来源
            this.getSalesTransactionData() // 交易数据汇总
            this.$nextTick(() => {
                this.$refs.refTableData.queryParams.pageNum = 1;
                this.$refs.refTableData.childQuery = this.queryParams
                this.$refs.refTableData.getList()
            })
        },
        // 商户查询改变
        merchantChange(e){
            if(this.merchantIdList.length > 0){
                this.queryParams.merchantIds = this.merchantIdList.toString()
            }else{
                this.queryParams.merchantIds = ''
            }
        },
        // 邀请人列表
        getSalesInviterList(){
            salesInviterList().then(res=>{
                var arr = [
                    { referrer: "", name: "全部" }
                ];
                this.inviterList = arr.concat(res.result)
            })
        },
        // 获取商户下拉列表
        getSalesShopList(){
            salesShopList().then(res=>{
                this.merchantList = res.result
            })
        },
        // 获取用户退款分析列表
        getSalesRefundAnalysisData(){
            this.loading = true
            salesRefundAnalysisData(this.queryParams).then(res=>{
                this.loading = false
                this.refundAnalysisList = res.result
            }).catch(err=>{
                this.loading = false
            })
        },
        // 订单来源切换
        selectOrderSource(){
            console.log('this.orderSource',this.orderSource)
            console.log('this.orderSourceData.amountDTO',this.orderSourceData)
            if(this.orderSource == 1){
                this.$refs.pieData.getDataList(this.orderSourceData.orderDTO,this.orderSource)  //销售订单数
            }else if(this.orderSource == 2){
                this.$refs.pieData.getDataList(this.orderSourceData.amountDTO,this.orderSource) //实付金额
            }else if(this.orderSource == 3){
                this.$refs.pieData.getDataList(this.orderSourceData.payerCountDTO,this.orderSource) //支付人数
            }
        },
        // 订单来源
        getSalesOrderSourceData() {
            this.loadingPicEcharts = true
            let data = JSON.parse(JSON.stringify(this.queryParams));  //深拷贝
            //用户数量和商家数量
            salesOrderSourceData(data).then((res) => {
                this.orderSourceData = res.result
                this.$nextTick(() => {
                    this.loadingPicEcharts = false
                    if(this.orderSource == 1){
                        this.$refs.pieData.getDataList(this.orderSourceData.orderDTO,this.orderSource)  //销售订单数
                    }else if(this.orderSource == 2){
                        this.$refs.pieData.getDataList(this.orderSourceData.amountDTO,this.orderSource) //实付金额
                    }else if(this.orderSource == 3){
                        this.$refs.pieData.getDataList(this.orderSourceData.payerCountDTO,this.orderSource) //支付人数
                    }
                })
            }).catch(error => {
                this.loadingPicEcharts = false
            })
        },
        // 交易数据汇总
        getSalesTransactionData() {
            this.loadingLineEcharts = true
            let data = JSON.parse(JSON.stringify(this.queryParams));  //深拷贝
            data.chartType = this.listHeadList[this.itemIndex].value
            //用户数量和商家数量
            salesTransactionData(data).then((res) => {
                this.transactionData = res.result
                this.listHeadList[0].num = this.transactionData.ordersCount
                this.listHeadList[1].num = this.transactionData.paidInAmount
                this.listHeadList[2].num = this.transactionData.payerCount
                this.listHeadList[3].num = this.transactionData.refundsCount
                this.listHeadList[4].num = this.transactionData.refundsAmount
                this.listHeadList[5].num = this.transactionData.refundsPersonCount
                this.$nextTick(() => {
                    this.loadingLineEcharts = false
                    // this.$refs.pieData.getDataList(this.billSummary)
                    this.$refs.lineData.getDataList(this.transactionData.transactionDataChartDTOS,this.listHeadList[this.itemIndex].name)
                })
            }).catch(error => {
                this.loadingLineEcharts = false
            })
        },
        // 昨日、本周、本月切换事件
        changeDate(item, index) {
            this.dateIndex = index
            this.queryParams.dateType = this.dateWordList[this.dateIndex].value
            this.date = []
            this.queryParams.beginDate = ''
            this.queryParams.endDate = ''
        },
        // 交易数据切换
        clickItem(item, index) {
            this.itemIndex = index
            this.getSalesTransactionData()
        },
        // 时间切换
        handleTime(e) {
            this.queryParams.beginDate = this.date[0]
            this.queryParams.endDate = this.date[1]
            this.dateIndex = ''
            this.queryParams.dateType = ''
        },
        // 获取活动状态字典
        getStatusList() {
            var dictType = "customer_equity_card_order_refund_type,customer_equity_card_order_refund_status";
            this.$getSelectList(dictType)
                .then((res) => {
                    this.refundTypeList = res.result[0].dictList
                })
                .finally(() => { });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getRequestData();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                referrer: '', //邀请人
                merchantIds: '', //商户查询
                dateType:1,//日期类别 1昨日 2本周 3本月
                beginDate: '', //开始时间
                endDate: '', //结束时间
            };
            this.dateIndex = 0
            this.merchantIdList = []
            this.date = []
            this.getRequestData();
        },
    },
};

</script>
<style scoped scoped lang="scss">
::v-deep .el-table .DisableSelection .cell .el-checkbox__inner {
    display: none;
}

.body_box {
    padding: 20px;
}

.head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
}

.listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
}

.listBox_head {
    padding: 0 0 20px 0;
}

.el-dropdown {
    margin-left: 10px;
}

.dateClass {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 16px;

    .dateClassItem {
        cursor: pointer;
        margin-left: 20px;
    }

    .dateOn {
        color: #1890ff;
        font-weight: bold;
    }
}

.listBox {
    .listBox_head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 20px;
    }
    .listBox_head_r{
        display: flex;
        align-items: center;
    }
    .list_title {
        font-size: 18px;
        font-weight: bold;
    }

    .list_head {
        width: 100%;
        display: grid;
        justify-content: space-around;
        grid-template-columns: repeat(auto-fill, 230px);
        grid-gap: 20px;

        .list_head_itme {
            width: 230px;
            padding: 15px 20px;
            border-radius: 10px;
            border: 1px solid #E7E7E7;
            margin-bottom: 20px;

            .lh_tip {
                font-size: 16px;
                color: #747474;
                margin-bottom: 20px;

                span {
                    margin-right: 4px;
                }
            }

            .lh_num {
                font-size: 36px;
                color: #222222;
            }
        }

        .lhOn {
            background: #e8f4ff;
        }
    }

    .list_body {}
}
.orderSource{
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .orderSource_item{
        box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
        background-color: #fff;
        border-radius: 8px;
        padding: 20px 20px;
        width: 49.5%;
        height: 430px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        .os_title{
            font-size: 18px;
            font-weight: bold;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .os_body{
            flex: 1;
        }
    }
}
</style>
  